<template>
  <div class="home">

    <el-container>

      <el-header class="layout-header" style="height: 145px;padding: 0">
          <img  style="margin: 20px 0 0 100px " src="../../public/images/title.png" alt="">
        <el-menu
            router
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#3263C1"
            text-color="#fff"
            active-text-color="#000000">

          <el-menu-item index="/admin"><img src="../../public/images/logo.png" alt=""></el-menu-item>
          <el-menu-item style="width: 150px" index="/">首页</el-menu-item>
          <el-menu-item index="/purchasing" >国际采购</el-menu-item>
          <el-menu-item index="/supply" >国际供应</el-menu-item>
          <el-menu-item index="/logistics">国际物流</el-menu-item>
          <el-menu-item index="/news">新闻与资讯</el-menu-item>
          <el-menu-item index="/about">关于我们</el-menu-item>
          <el-menu-item index="/userLogin">登录</el-menu-item>
          <el-menu-item index="/userSignup">注册</el-menu-item>
          <el-menu-item index="/test">测试</el-menu-item>
          <el-menu-item index="/service">用户发布商品</el-menu-item>
        </el-menu>

        <div>
          <div class="sssss">
            <div
                class="callback float"
                @mousedown="down"
                @touchstart="down"
                @mousemove="move"
                @touchmove="move"
                @mouseover="over"
                @mouseout="out"
                @mouseup="end"
                @touchend="end"
                @click="onClick"
                ref="fu"
                :class="bg == 1 ? 'bg1' : 'bg2'"
            >
              <!-- <p @click="callback">返回</p> :style="{ 'background-image': img }" -->
              <!-- <img @click="callback" src="@/assets/images/icon1.png" alt /> -->
            </div>
            <div
                :style="{ left: left + 'px', top: top + 'px' }"
                v-if="menu"
                @mouseleave="out2"
                @mouseover.capture="over2"
                class="menuclass"
            >
              <div class="titlea">
                快捷导航 <i style="color: #409eff" class="el-icon-setting"></i>
              </div>
              <div class="boxa">
                <div
                    class="item"
                    style="
              background: linear-gradient(150deg, #accaff 0%, #3b88ec 100%);
            "
                >
                  <a href="/">首页</a>
                </div>

                <div
                    class="item"
                    style="
              background: linear-gradient(150deg, #e8d6ff 0%, #9f55ff 100%);
            "
                >
                  <a href="/userLogin">企业登录</a>
                </div>

                <div
                    class="item"
                    style="
              background: linear-gradient(150deg, #fdda45 0%, #fe6b62 100%);
            "
                >
                  <a href="/userSignup">企业注册</a>
                </div>

                <div
                    class="item"
                    style="
              background: linear-gradient(150deg, #cefbc8 0%, #00aec5 100%);
            "
                >
                  <a href="http://localhost:8080/#/imclient">联系客服</a>
                </div>

                <div
                    class="item"
                    style="
              margin-top: 7px;
              background: linear-gradient(150deg, #c5f8e6 0%, #10a465 100%);
            "
                >
                  <a href="/about">关于我们</a>
                </div>

              </div>
            </div>
          </div>
        </div>
      </el-header>

      <el-container class="layout-body">

        <el-main class="layout-main" style="padding: 0">
       <router-view/>
        </el-main>



      </el-container>



        <el-container >
          <el-footer>
            <div style="background-color: #3f3f3f;
            text-align: center;color: #b1b1b1;padding: 30px 0">
              <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号
              </p>
              <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
              <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
            </div>
          </el-footer>
        </el-container>

    </el-container>


  </div>
</template>

<style scoped>
.bg1 {
  background-image: url("../assets/pic1.jpg");
}
.bg2 {
  background-image: url("../assets/img1.png");
}
.callback p {
  font-size: 16px;
  color: #fff;
  background: rgba(56, 57, 58, 0.5);
  border-radius: 50%;
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-family: PingFang SC;
  font-weight: 600;
  box-shadow: 0 0 10px #fff;
}
.callback img {
  display: block;
  width: 50px;
  height: 50px;
  box-shadow: 0 0 10px rgb(133, 129, 129);
  border-radius: 50%;
  background: #fff;
}
.callback {
  position: fixed;
  width: 80px;
  height: 80px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: 40px;
  left: 94%;
  z-index: 99999;
}
.float {
  position: fixed;
  touch-action: none;
  text-align: center;
  border-radius: 24px;
  line-height: 48px;
  color: white;
}

.menuclass {
  text-align: left;
  position: absolute;
  color: #000;
  width: 764px;
  background: #ffffff;
  box-shadow: 0px 6px 26px 1px rgba(51, 51, 51, 0.16);
  padding: 20px;
}
.sssss {
  position: relative;
  background-color: #000;
  right: 0;
  z-index: 99999;
}
.titlea {
  font-size: 18px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
.boxa {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  z-index: 999999;
}
.item {
  width: 168px;
  height: 75px;
  border-radius: 4px 4px 4px 4px;
  font-size: 16px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  margin-left: 7px;
  line-height: 75px;
}
.el-menu-demo{
  height: 63px;
}



</style>



<script>
export default {
  name: "suspensionBall",

  data() {
    return {
      left: 0,
      top: 40,
      bg: 1,
      menu: false,
      isLoading: false,
      flags: false, //控制使用
      position: {
        x: 0,
        y: 0,
      },
      nx: "",
      ny: "",
      dx: "",
      dy: "",
      xPum: "",
      yPum: "",
      movb: 1,
      num: 1,
    };
  },
  created() {},
  mounted() {
    this.left = this.$refs.fu.offsetLeft - 750;
  },
  methods: {
    out2() {
      this.menu = false;
    },
    over2() {},
    out() {
      this.bg = 2;
    },
    over() {
      this.menu = true;
      this.num = 2;
      this.bg = 1;
    },
    callback() {
      this.$router.go(-1);
    },
    onRefresh() {
      // window.location.reload();
      setTimeout((res) => {
        console.log(res);
        this.isLoading = false;
      }, 1000);
    },
    down() {
      this.flags = true;
      var touch;
      if (event.touches) {
        touch = event.touches[0];
      } else {
        touch = event;
      }
      this.position.x = touch.clientX;
      this.position.y = touch.clientY;
      this.dx = this.$refs.fu.offsetLeft;
      this.dy = this.$refs.fu.offsetTop;
    },
    move() {
      if (this.flags) {
        this.movb = 2;
        this.menu = false;
        var touch;
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        this.nx = touch.clientX - this.position.x;
        this.ny = touch.clientY - this.position.y;
        this.xPum = this.dx + this.nx;
        this.yPum = this.dy + this.ny;
        let width = window.innerWidth - this.$refs.fu.offsetWidth; //屏幕宽度减去自身控件宽度
        let height = window.innerHeight - this.$refs.fu.offsetHeight; //屏幕高度减去自身控件高度
        this.xPum < 0 && (this.xPum = 0);
        this.yPum < 0 && (this.yPum = 0);
        this.xPum > width && (this.xPum = width);
        this.yPum > height && (this.yPum = height);
        // if (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= width &&this.yPum<= height) {
        this.$refs.fu.style.left = this.xPum + "px";
        this.$refs.fu.style.top = this.yPum + "px";
        this.left = this.xPum - 750;
        this.top = this.yPum;
        // }
        //阻止页面的滑动默认事件
        document.addEventListener(
            "touchmove",
            function () {
              event.preventDefault();
            },
            false
        );
      }
    },
    //鼠标释放时候的函数
    end() {
      this.flags = false;
    },
    onClick() {
      if (this.movb == 2) {
        this.movb = 1;
      } else {
        this.menu = !this.menu;
      }
      // this.$emit("click");
    },
  },
};
</script>